<template>
  <div class="comment-wrapper">
    <header>
      <van-icon name="arrow-left" @click="goBack" />
      <div>评论文章</div>
      <span @click="toCommentArticle">发表</span>
    </header>
    <div class="container">
      <textarea
        v-model="commentValue"
        name=""
        id=""
        cols="30"
        rows="10"
        placeholder="说点什么~"
      ></textarea>
    </div>
  </div>
</template>
<script>
import * as articlePage from "@/api/article-page";
export default {
  data() {
    return {
      // 评论内容
      commentValue: "",
    };
  },
  methods: {
    // 回到上一页
    goBack() {
      this.$router.go(-1);
    },
    // 评论文章
    async toCommentArticle() {
      console.log(this.commentValue);
      const res = await articlePage.commentArticle(
        this.$route.query.id,
        this.commentValue
      );
      if (this.commentValue.trim()) {
        this.$notify({
          type: res ? "success" : "danger",
          message: res.status === 201 ? "评论成功" : "评论失败",
        });
        this.goBack();
      } else {
        this.$notify({
          message: "评论失败",
        });
      }
      this.commentValue = "";
    },
  },
};
</script>
<style lang="less" scoped>
.comment-wrapper {
  width: 100%;
  height: 100vh;
  // 头部
  header {
    padding: 0 16px;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    span {
      color: #fc6627;
    }
  }
  .container {
    padding: 0 16px;
    box-sizing: border-box;
    ::placeholder {
      color: #999;
    }
    textarea {
      padding: 8px;
      box-sizing: border-box;
      width: 100%;
      margin-top: 32px;
      resize: none;
      border: none;
      background-color: #eee;
      border-radius: 4px;
    }
  }
}
</style>